<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <Header />
      </el-header>
      <el-container class="main-container">
        <Aside class="custom-aside" />
        <el-container>
          <el-main>
            <div class="main-content">
              <RouterView />
              <div class="profile-cards-section">
                <ProfileCardsContainer />
              </div>
            </div>
          </el-main>
          <!-- <el-footer>Footer</el-footer> -->
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import Aside from '../components/aside.vue';
import Header from '../components/navHeader.vue';
import ProfileCardsContainer from '../components/profileCards/ProfileCardsContainer.vue';
</script>

<style lang="less" scoped>
.common-layout {
  height: 100%;

  .el-container {
    height: 100%;
  }

  .main-container {
    display: flex;
    height: 90%;
    justify-content: flex-start;
    align-items: stretch;
  }

  .main-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
  }

  .profile-cards-section {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 0;
  }

  .custom-aside {
    height: 95%;
    border-radius: 15px;
    background-color: #f4f7fc;
    padding: 20px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
  }
}
</style>